<template>
    <section class="immediatelyMonitor">
        <div class="table">
            <el-row>
                <el-col :span="4" class="col_1">计划名称：</el-col>
                <el-col :span="8" class="col_2">
					<el-input v-model="planName" placeholder="请输入计划名称" size='small'style='width: 265px;'></el-input>
				</el-col>
                <el-col :span="4" class="col_3">监控类型：</el-col>
                <el-col :span="8" class="col_4">
					<a target="_blank" :href="'https://trade.onloon.net/?shopId='">
						{{monitoringType}}
					</a>
				</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">品牌：</el-col>
                <el-col :span="8" class="col_2">{{brand}}</el-col>
                <el-col :span="4" class="col_3">关键词：</el-col>
                <el-col :span="8" class="col_4">{{keyWord}}</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">平台:</el-col>
                <el-col :span="8" class="col_2">{{platForm}}</el-col>
                <el-col :span="4" class="col_3">监控频率：</el-col>
                <el-col :span="8" class="col_4">
					<el-radio-group v-model="monitoringFrequency">
						<el-radio v-model="monitoringFrequency" label="1">立即</el-radio>
						<el-radio v-model="monitoringFrequency" label="2">定时</el-radio>
					</el-radio-group>
				</el-col>
            </el-row>
			<el-row>
				<el-col :span="4" class="col_1">监控维度：</el-col>
                <el-col :span="20" class="col_2">
					<el-checkbox v-model="lowPriceMonitor">低价监控</el-checkbox>
					<el-checkbox v-model="fakeMonitor">假货监控</el-checkbox>
				</el-col>
			</el-row>
			<el-row class="table_action_row">
                <el-col :span="24">
					<el-button type="primary" class="top_save" @click="submitForm()" size="small"><i class="fa fa-save"></i> 保 存</el-button>
            		<el-button type="danger" class="top_close" @click="layOut()" size="small"><i class="fa fa-sign-out"></i> 退 出</el-button>
                </el-col>
            </el-row>
		</div>
    </section>
</template>
<script>
    import Vue from 'vue'
	import {mapGetters} from 'vuex'
	import {Row, Col,Message,MessageBox,Radio, Checkbox, CheckboxGroup,RadioGroup,Input,Button} from 'element-ui'
    import {getDate} from '../../utils/auth'
    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Radio);
    Vue.use(Input);
    Vue.use(Checkbox);
    Vue.use(CheckboxGroup);
    Vue.use(RadioGroup);
    Vue.use(Button);

    Vue.prototype.$message = Message;
    Vue.prototype.$confirm = MessageBox.confirm;
    export default {
        head(){
            return {
                title: "立即监控",
                meta: [
                    { hid: '', name: '', content: ''}
                ]
            }
        },
        data() {
            return {
				tabName: '定时监控',
				planName:'九牧计划',
				monitoringType:'关键词监控',
				brand:'九牧',
				keyWord:'7202；九牧02080；九牧S25085',
				platForm:'天猫；淘宝；京东',
				monitoringFrequency:'1',
				lowPriceMonitor:true,
				fakeMonitor:false
            }
        },
        methods:{
            layOut(){//退出
				window.history.go(-1);
			},
		    submitForm() {
		        if(this.planName==""){
					this.$message({
						showClose: true,
						message: '计划名称不能为空',
						type: 'error'
					});
					return false
				}
				if(this.lowPriceMonitor==false&&this.fakeMonitor==false){
					this.$message({
						showClose: true,
						message: '监控维度不能为空',
						type: 'error'
					});
					return false
				}
			},
        },
        computed : {
            ...mapGetters({
               'pageTabsList': 'getPageTabsList',
            })
        },
        mounted() {
           
        },
        created(){
            if(process.BROWSER_BUILD) {
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = this.tabName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
        }
    }
</script>
<style lang="scss">
    .immediatelyMonitor{
        .table{
			margin-top: 10px;
			border: 1px solid #ccc;
			font-size: 14px;
			.col_2, .col_4 {
				text-align: left;
				text-indent: 3px;
			}
		
			.col_1, .col_3 {
				text-align: right;
				background: #f1f2f2;
			}
			.col_1, .col_2, .col_3 {
				border-right: 1px dotted #ccc;
				border-bottom: 1px dotted #ccc;
			}
			.col_4 {
				border-bottom: 1px dotted #ccc;
			}
			.el-col {
				height: 40px;
				line-height: 40px;
				white-space: normal !important;
				.el-button-group {
					margin-left: 10px;
				}
			}
			.content_title, .content_text {
				height: 200px;
			}
			.table_action_row {
				text-align: center;
				background: #f1f2f2;
			}
			.el-radio-group{
				margin-top: 10px
			}
        }
    }
</style>


